<template>
  <a-form
      :model="form"
      class="form"
      :labelCol="formItemLayout.labelCol"
      :wrapperCol="formItemLayout.wrapperCol"
  >
    <a-row type="flex">
    <a-col flex="1">
    <a-row  >
      <a-col :span="10" >
        <a-form-item label="姓名" name="name">
          <a-input
              placeholder="请输入姓名"
              v-model:value="form.name"
          />
        </a-form-item>
      </a-col>

      <a-col :span="10" >
        <a-form-item label="学号" name="number">
          <a-input
              placeholder="请输入学号"
              v-model:value="form.number"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <a-row class="changeRow" v-show="isShow" >
      <a-col :span="10">
        <a-form-item label="班级" name="classNumber">
          <a-input
              placeholder="请输入班级"
              v-model:value="form.classNumber"
          />
        </a-form-item>
      </a-col>

      <a-col :span="10">
        <a-form-item name="sex" label="性别">
          <a-select placeholder="请选择性别" v-model:value="form.sex">
            <a-select-option value="男">男</a-select-option>
            <a-select-option value="女">女</a-select-option>

          </a-select>
        </a-form-item>
      </a-col>

    </a-row>
    </a-col>
    <a-col flex="0 1 300px">
      <a-form-item >
        <a-button type="primary" style="margin-right: 8px" @click="setSearch">查询</a-button>
        <a-button @click="again"> 重置</a-button>
        <a-button type="link"  @click="showMessage">
          <span v-show="!isShow">展开<DownOutlined/></span>
          <span v-show="isShow" >收起<UpOutlined/></span>
        </a-button>
      </a-form-item>
    </a-col>
    </a-row>
  </a-form>
</template>

<script>
  import {Form, Button, Input, DatePicker, Select, Row, Col} from 'ant-design-vue';
  import { DownOutlined ,UpOutlined} from '@ant-design/icons-vue'
  const FormItem = Form.Item;
  const { Option } = Select;
  const {RangePicker} = DatePicker;
  export default {
    name: "StudentForm",
    components: {
      ARow: Row,
      ACol: Col,
      AForm: Form,
      AButton: Button,
      AInput: Input,
      ARangePicker: RangePicker,
      AFormItem: FormItem,
      ASelect: Select,
      ASelectOption: Option,
      DownOutlined,
      UpOutlined
    },

    data(){
      return {
        form: {
          name: '',
          number: '',
          classNumber: '',
          sex: '',
},
        formItemLayout: {
          labelCol: { span: 6 },
          wrapperCol: { span: 18 }
        },
        isShow: false,

      }
    },
    methods: {
      showMessage(){
        this.isShow=!this.isShow
      },
      setSearch(){
        let formData = this.form
        this.$emit('getData',formData)
      },
      again(){
        let formData = this.form
        this.$emit('again',formData)
      }


    }

  }
</script>

<style scoped>

</style>